<template>
	<view class="time mb-20 flex-column">
		<view class="flex-between flex-1 align-center">
			<view class="label">包月时长</view>
			<view class="value" @click="handleShow">{{monthData.month}}<u-icon name="arrow-right" color="#919EB5" size="20"></u-icon></view>
		</view>
		<view class="flex-between flex-1 align-center">
			<view class="label flex-1">{{monthData.start}}</view>
			<view class="label">至</view>
			<view class="label flex-1 text-right">{{monthData.end}}</view>
		</view>
		<view class="flex-between flex-1 align-center">
			<view class="start-time">开始时间</view>
			<view class="end-time">结束时间</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			monthData: {
				type: Object,
				default () {
					return {
						month: '三个月',
						start: '-',
						end: '-'
					}
				}
			}
		},
		data () {
			return {
			}
		},
		methods: {
			handleShow () {
				this.$emit('showMonth')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.time{
		height: 229rpx;
		border-radius: 20rpx;
		background: #fff;
		padding: 30rpx;
		.label{
			font-family: PingFang SC;
			font-size: 30rpx;
			font-weight: 500;
			color: #222222;
		}
		.value{
			font-family: PingFang SC;
			font-size: 26rpx;
			font-weight: 400;
			text-align: right;
			color: #222222;
		}
		.start-time,.end-time{
			font-family: PingFang SC;
			font-size: 22rpx;
			font-weight: 500;
			color: #919EB5;
		}
	}
</style>